<template>
    <div>
        <!-- 頭部 -->
        <van-nav-bar left-arrow title="我的月报" @click-left="onClickLeft"> </van-nav-bar>
        <div class="evaluation-filter">
            <!-- <span>选择月份</span> -->
            <div class="datePicker" @click="openPicker()">
                {{ filterdate.text }}
            </div>
        </div>
        <van-popup :show="showPicker" position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" value-key="text" />
        </van-popup>
        <!-- body -->
        <div class="mt20">
            <div v-for="(item, index) in listData" :key="index">
                <monthly-item :taskData="item"></monthly-item>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.add {
    display: flex;
    img {
        width: 40px;
        height: 40px;
    }
    div {
        color: #288ef4;
        margin-left: 5px;
        font-size: 28px;
    }
}
.mt20 {
    margin-top: 20px;
}
.search-body {
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
    margin-bottom: 0.3125rem;
}
.code-body {
    background: #fff;
    padding: 15px 30px;
}
.code-px {
    margin-left: 30px;
    text-align: left;
    padding: 26px;
    font-size: 26px;
    color: #666666;
    span {
        float: right;
        margin-right: 30px;
        color: #288ef4;
        img {
            width: 24px;
            height: 24px;
            padding-left: 5px;
        }
    }
}
</style>
<script>
import { Button, Icon, NavBar,Picker,Popup  } from "vant";
import httpRequest from "../../util/httpRequest";
import monthlyItem from "@/components/task/monthlyItem.vue";
import { useRouter } from "vue-router";

export default {
    components: {
        [Button.name]: Button,
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
        monthlyItem,
    },
    data() {
        return {
            router: useRouter(),
            listData: [],
            data: {},
            pages: {
                // month:"2021-05"
            },
            labelsBoxData: [],
            value: "",
            checked: false,
            navActive: 2,
            showPicker: false,
            filterdate: {
                id: 10,
                text: "2021年5月(本月)",
            },
            columns: [
                {
                    id: 1,
                    text: "2020年8月",
                },
                {
                    id: 2,
                    text: "2020年9月",
                },
                {
                    id: 3,
                    text: "2020年10月",
                },
                {
                    id: 4,
                    text: "2020年11月",
                },
                {
                    id: 5,
                    text: "2020年12月",
                },
                {
                    id: 6,
                    text: "2021年1月",
                },
                {
                    id: 7,
                    text: "2021年2月",
                },
                {
                    id: 8,
                    text: "2021年3月",
                },
                {
                    id: 9,
                    text: "2020年4月",
                },
                {
                    id: 10,
                    text: "2021年5月(本月)",
                },
            ],
        };
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {
        this.init();
    },
    methods: {
        init() {
            httpRequest.post("月报详情", this.pages).then((res) => {
                this.data = res.data;
                this.listData = res.data.monthreportRecordList;
            });
        },
        onSearch() {
            alert("TEST现在不是真实的列表：" + this.pages.keywords);
            httpRequest.post("查询任务列表", this.pages).then((res) => {
                alert(res.msg);
            });
        },
        getChild(data) {
            alert("TEST现在不是真实的列表：" + data.name);
        },
        getTask(data) {
            // console.log('data:',data)
            this.router.push({
                path: "/jd",
                query: {
                    taskId: data.taskId,
                },
            });
        },
        onClickLeft() {
            this.router.push("/myReport");
        },
        onConfirm(value) {
            this.filterdate = value;
            this.showPicker = false;
        },
        openPicker(){
          this.showPicker = true;
          console.log(this.showPicker);
        }
    },
};
</script>
